<script lang="ts" setup>
const loginType = ref<'账号登录' | '手机登录'>('账号登录')
const loginData = ref({
  username: '',
  password: '',
  rememberMe: false,
  phone: '',
})
const code = ref('')

const formModel = reactive({
  user_no: '',
  pwd: '',
})
const userStore = useUserStore()

const dialogVisible = computed(() => userStore.loginVisible)
const allowCloseLogin = storeToRefs(userStore).allowCloseLogin
function handleClose() {
  userStore.setLoginVisible(false)
}

async function userLogin() {
  formModel.user_no = loginData.value.username
  formModel.pwd = loginData.value.password
  if (!formModel.user_no || !formModel.pwd) {
    return ElMessage.error('请输入账号和密码')
  }
  userStore.accountLogin(formModel).then(() => {
    if (allowCloseLogin.value === false) {
      userStore.setAllowCloseLogin(true)
      window.location?.reload?.()
    }
  })
}
</script>

<template>
  <div>
    <ClientOnly>
      <div class="h-screen min-h-600px flex items-center justify-center overflow-hidden bg-#F8F8F8">
        <div class="h-520px w-470px rounded-md bg-white bg-cover shadow-lg">
          <div class="bg-[url('/img/login-bg.png')] py-4.5 p-l-10 text-left">
            <b class="text-1.2rem text-#AC8358">西安地方志管理平台</b>
          </div>
          <div class="px-40px">
            <div class="btu my-20px border-b-1px">
              <button
                class="m-r-10px p-10px" :class="{ 'btn-on': loginType == '账号登录' }"
                @click="loginType = '账号登录'"
              >
                账号登录
              </button>
              <button
                class="mx-10px p-10px" :class="{ 'btn-on': loginType == '手机登录' }"
                @click="loginType = '手机登录'"
              >
                手机登录
              </button>
            </div>
            <div>
              <div class="min-h-200px">
                <div v-if="loginType == '账号登录'">
                  <div>
                    登录账号<br><input
                      v-model="loginData.username"
                      placeholder="请输入账号"
                      class="my-8px h-40px w-100% border-2px border-#ac845875 rounded-md p-10px outline-none"
                    >
                  </div>
                  <div>
                    登录密码<br><input
                      v-model="loginData.password" placeholder="请输入密码"
                      type="password"
                      class="my-8px h-40px w-100% border-2px border-#ac845875 rounded-md p-10px outline-none"
                    >
                  </div>

                  <div flex="~ justify-between ">
                    <el-checkbox
                      v-model="loginData.rememberMe" label="记住密码" class="jizhu p-l-10px"
                      size="large"
                    />
                    <span
                      class="cursor-pointer p-r-10px text-14px text-#606266 line-height-10 active:text-#AC8358"
                    >忘记密码</span>
                  </div>
                </div>
                <div v-if="loginType == '手机登录'">
                  <div>
                    手机号<br><input
                      v-model="loginData.phone" placeholder="请输入手机号"
                      type="tel"
                      class="my-8px h-40px w-100% border-2px border-#ac845875 rounded-md p-10px outline-none"
                    >
                  </div>
                  <div>
                    验证码<br>
                    <div class="my-8px h-40px border-2px border-#ac845875 rounded-md">
                      <input
                        v-model="code"
                        placeholder="请输入验证码"
                        class="w-60% pl-10px outline-none"
                      >
                      <button class="h-100% w-40% btn">
                        发送验证码
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <button class="mx-10% my-20px w-80% text-center btn" @click="userLogin">
                登录
              </button>
            </div>

            <span class="mx-30% my-8">没有账号？<NuxtLink to="/user/register"><b
              class="cursor-pointer text-#AC8358"
            >立即注册</b></NuxtLink></span>
          </div>
        </div>
      </div>
    </ClientOnly>
  </div>
</template>

<style lang="scss" scoped>
.btn-on {
  border-bottom: 4px solid #ac8458;
}

.jizhu {
  &:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #55637dd9;
  }
}
</style>
